<template>
  <div class="info-container-box">
    <div class="info-container" v-if="value">
      <template v-if="data.type === 'view'">
        <div class="info-title">
          <el-tooltip :disabled="disabled" :content="info.name" placement="top">
            <span @mouseenter="mouseenter($event)" @mouseleave="mouseleave">
              <svg-icon icon-class="大标题图标" />
              {{ info.name }}
            </span>
          </el-tooltip>
          <svg-icon
            @click.stop="$emit('input', false)"
            class="close-icon"
            icon-class="关闭"
          />
        </div>
        <div class="info-content-box">
          <div class="info-content" v-if="data.children.length">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>指标结果</span>
            </div>
            <div class="content-body">
              <div
                class="index_result"
                v-for="(item, index) in data.children"
                :key="index"
              >
                <div class="index_result_title" :title="item.name">
                  {{ item.name }}
                </div>
                <div class="evaluation">
                  <svg-icon :icon-class="item.evaluationResult" />
                </div>
              </div>
            </div>
          </div>
          <div class="info-content" v-if="data.remark">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>体检详情</span>
            </div>
            <div class="content-body">
              <span class="content-text">{{ data.remark }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="info-title">
          <el-tooltip
            :disabled="disabled"
            :content="info.index_name"
            placement="top"
          >
            <span @mouseenter="mouseenter($event)" @mouseleave="mouseleave">
              <svg-icon icon-class="大标题图标" />
              {{ info.index_name }}
              {{ info.indexUnit ? `(${info.indexUnit})` : '' }}
              <el-tag v-if="info.indexType">{{
                indexType(info.indexType)
              }}</el-tag>
            </span>
          </el-tooltip>
          <svg-icon
            @click.stop="$emit('input', false)"
            class="close-icon"
            icon-class="关闭"
          />
        </div>
        <div class="info-content-box">
          <div v-if="info.build" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>建设要求</span>
            </div>
            <div class="content-body">
              <span v-html="info.build" class="content-text"></span>
            </div>
          </div>
          <div v-if="info.index_def" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>指标释义</span>
            </div>
            <div class="content-body">
              <span v-html="info.index_def" class="content-text"></span>
            </div>
          </div>
          <div v-if="info.standard" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>评价标准</span>
            </div>
            <div class="content-body">
              <span v-html="info.standard" class="content-text"></span>
            </div>
          </div>
          <!-- <div v-if="info.calc_formula" class="info-content"> -->
          <div
            class="info-content"
            v-if="
              info.indexValue || info.referenceValue || info.evaluationResult
            "
          >
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>体检详情</span>
            </div>
            <div class="content-body detail">
              <!-- <div class="formula-box">
              <div class="formula-icon">
                <svg-icon icon-class="公式" />
              </div>
              <div class="formula-text">
                {{ info.calc_formula }}
              </div>
            </div> -->
              <div class="detail-box">
                <div class="detail-item">
                  <div class="item-label">自体检值</div>
                  <div class="item-value">
                    {{ info.indexValue ? info.indexValue : '-' }}
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-label">参考值</div>
                  <div class="item-value">
                    {{ info.referenceValue ? info.referenceValue : '-' }}
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-label">评价结果</div>
                  <div
                    class="item-value"
                    :style="evaluationResultColor(info.evaluationResult)"
                  >
                    {{ info.evaluationResult ? info.evaluationResult : '-' }}
                  </div>
                  <!-- <div class="item-value" style="color: green;">优</div>
                
                <div class="item-value" style="color: gray;">中</div> -->
                  <!-- <div class="item-value" style="color: red;">差</div> -->
                </div>
                <!-- <div class="detail-item">
                <div class="item-value">{{ info.median_value }}</div>
                <div class="item-label">全国中位数</div>
              </div> -->
                <!-- <div class="detail-item">
                <div class="item-value">{{ info.average_value }}</div>
                <div class="item-label">全国平均数</div>
              </div> -->
              </div>
            </div>
          </div>
          <div v-if="info.index_def && showEchart && list.length" class="chart">
            <Rule :list="list" :max="max * 1.1" :min="min * 0.9" />
          </div>
          <div v-if="info.inspectReslult" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>体检结论</span>
            </div>
            <div class="content-body">
              <span v-html="info.inspectReslult" class="content-text"></span>
            </div>
          </div>
          <div v-if="info.stat_scope" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>统计范围</span>
            </div>
            <div class="content-body">
              <span class="content-text">{{ info.stat_scope }}</span>
            </div>
          </div>
          <div v-if="info.data_source" class="info-content">
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>数据来源</span>
            </div>
            <div class="content-body">
              <span class="content-text">{{ info.data_source }}</span>
            </div>
          </div>
          <template v-if="charts && charts.length">
            <div
              v-for="(item, index) in charts"
              :key="index"
              class="info-content"
            >
              <div class="content-title">
                <svg-icon icon-class="标题图标" />
                <span>{{ item.title }}</span>
              </div>
              <div class="content-body echarts-box">
                <v-chart
                  :options="item.option"
                  autoresize
                  :style="{ width: '100%', height: '300px' }"
                />
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>

    <div v-if="show" class="btn-box">
      <svg-icon
        @click="$emit('input', !value)"
        :icon-class="value ? 'open-info' : 'close-info'"
      />
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import _ from 'lodash'
import Rule from './rule.vue'

export default {
  name: 'info',
  components: {
    'v-chart': ECharts,
    Rule,
  },
  props: {
    value: {
      type: Boolean,
      dafault: false,
    },
    // 当前选中的menu
    menu: {
      type: Object,
      default() {
        return null
      },
    },
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    data(val) {
      this.info = val || {}
      let { years_value, refer_value } = val
      refer_value = '11.83-41.28'
      years_value = [
        { insp_value: '18.2', year: '2021' },
        { insp_value: '18.21', year: '2020' },
      ]
      if (years_value && refer_value) {
        const minmax = refer_value.split('-')
        if (
          minmax.length === 2 &&
          !Number.isNaN(Number(minmax[0])) &&
          !Number.isNaN(Number(minmax[1])) &&
          minmax[0] !== '' &&
          minmax[1] !== ''
        ) {
          // let max = Math.max(Number(minmax[0]), Number(minmax[1]));
          // let min = Math.min(Number(minmax[0]), Number(minmax[1]));
          this.showEchart = true
          this.$nextTick(() => {
            this.min = 0
            this.max = 0
            // console.log("ssssss", years_value);
            // this.list = years_value
            //   .sort((a, b) => a.year - b.year)
            //   .map(item => {
            //     const maxVal = Math.max(item.insp_value, max, min);
            //     const minVal = Math.min(item.insp_value, max, min);
            //     if (maxVal > this.max) this.max = maxVal;
            //     if (minVal < this.min) this.min = minVal;
            //     return {
            //       ...item,
            //       min,
            //       max,
            //     };
            //   });
            const valueOfAllYear = []
            if (this.data.indexValue) {
              valueOfAllYear.push({
                year: this.data.year,
                value: {
                  value: this.data.indexValue,
                  itemStyle: {
                    color: '#29B4F2',
                  },
                },
              })
            }
            if (this.data.relationIndexInfo) {
              this.data.relationIndexInfo.forEach((item) => {
                if (item.indexValue) {
                  valueOfAllYear.push({
                    year: item.year,
                    value: item.indexValue,
                  })
                }
              })
            }
            // console.log(valueOfAllYear, "==================++++++");
            this.list = [...valueOfAllYear]
            // this.list = [
            //   {
            //     year: 2015,
            //     value: 10,
            //   },
            //   {
            //     year: 2016,
            //     value: 20,
            //   },
            //   {
            //     year: 2017,
            //     value: {
            //       value: 11.63,
            //       itemStyle: {
            //         color: '#29B4F2',
            //       },
            //     },
            //   },
            //   {
            //     year: 2018,
            //     value: 40,
            //   },
            //   {
            //     year: 2019,
            //     value: 50,
            //   },
            // ];
          })
        } else {
          this.showEchart = false
        }
      }
      // this.list =
      if (!Object.keys(this.info).length) {
        // this.$emit('input', false)
        return false
      }
      this.show = true
      /*
        type: 图表类型，默认bar。stack堆叠柱形（特殊处理）
      */
      // let chartData = JSON.parse(this.info.stat_data);
      // if (chartData && chartData.length) {
      //   this.charts = this.drawEchart(chartData);
      // } else {
      //   this.charts = [];
      // }
    },
  },
  data() {
    return {
      list: [], //图表需要的数据
      info: {},
      show: false,
      disabled: true, // tooltip是否可用
      charts: [],
      min: 0,
      max: 0,
      showEchart: true,
      indicatorTypeOptions: [
        {
          value: 0,
          label: '基本指标',
        },
        {
          value: 1,
          label: '特色指标',
        },
        {
          value: 2,
          label: '补充指标',
        },
      ],
    }
  },
  computed: {
    indexType() {
      return function (type) {
        return this.indicatorTypeOptions.find((item) => item.value == type)
          ?.label
      }
    },
    evaluationResultColor() {
      return (result) => {
        //
        let color
        if (result === '优') {
          color = 'color: green;'
        }
        if (result === '良') {
          color = 'color: blue;'
        }
        if (result === '中') {
          color = 'color: gray;'
        }
        if (result === '差') {
          color = 'color: red;'
        }
        return color
      }
    },
  },
  methods: {
    // mouseenter
    mouseenter(e) {
      if (e.target.scrollWidth > e.target.clientWidth) {
        this.disabled = false
      }
    },
    mouseleave(e) {
      if (e.target.scrollWidth > e.target.clientWidth) {
        this.disabled = true
      }
    },
    drawEchart(data) {
      // 根据数据图表类型，获取对应得option
      let charts = []
      data.forEach((item) => {
        let obj = {
          title: item.title || '近五年数据统计情况', // 默认为 近五年数据统计情况
          option: this.getOptionByType(item, item.type),
        }
        charts.push(obj)
      })
      // console.log(charts)
      return charts
    },
    getOptionByType(data, type = 'bar') {
      const color = ['#1EBDFF', '#28D8DD', '#FFE42C', '#51BCF3', '#FF5514'] // 颜色
      const bar = {
        // bar的基础对象
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '5%',
          top: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          position: 'top',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#979CAD',
            },
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              color: '#DEDEEE',
            },
            show: true, //隐藏或显示
          },
        },
        yAxis: {
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#979CAD',
            },
          },
        },
        series: [],
      }

      let options = {
        bar: bar,
        pie: {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        },
        // 堆叠直方图
        'stack-bar': bar,
      }
      let currentOption = options[type]
      if (type == 'bar') {
        let option = {
          yAxis: {
            data: data.key,
          },
          series: [
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  color: '#1EBDFF',
                },
              },
              data: data.data,
            },
          ],
        }
        return _.defaultsDeep({}, currentOption, option)
      }
      // 堆叠直方图处理
      if (type == 'stack-bar') {
        let option = {
          grid: {
            top: '12%',
          },
          yAxis: {
            type: 'category',
            data: data.key,
          },
          legend: data.legend,
          color: color,
          series: data.data.map((item, index) => {
            let obj = {
              name: data.legend.data[index],
              type: 'bar',
              stack: 'stack',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: item,
            }
            return obj
          }),
        }
        console.log(option)
        return _.defaultsDeep({}, currentOption, option)
      }

      // 饼图
      if (type == 'pie') {
        let option = {
          color: color,
        }
        return _.defaultsDeep({}, currentOption, option)
      }
    },
  },
}
</script>

<style lang="scss">
.info-container-box {
  position: absolute;
  height: calc(100%);
  position: absolute;
  z-index: 20;
  background: pink;

  top: 0;
  right: 0;
  .btn-box {
    width: 41px;
    height: 41px;
    text-align: center;
    line-height: 41px;
    border-radius: 50%;
    position: absolute;
    background: #e0effd;
    color: #000;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    left: -20px;
  }
  .info-container {
    width: 396px;
    height: calc(100%);
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-sizing: border-box;
    overflow: visible;
    .info-title {
      padding: 0 8px 0 12px;
      height: 50px;
      background: #e0effd;
      display: flex;
      align-items: center;
      .el-tag {
        border-color: #02a7f0;
        color: #02a7f0;
        background: #e0effd;
      }
      > span {
        display: inline-block;
        max-width: calc(100% - 20px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
      }
      .close-icon {
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .info-content-box {
      max-height: calc(100% - 50px);
      overflow-y: auto;
      .info-content {
        padding: 0 12px;
        padding-bottom: 16px;
        &:not(:last-child) {
          border-bottom: 1px solid #f3f3f9;
        }
        .content-title {
          padding: 16px 0 2px 0;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          > span {
            margin-left: 5px;
          }
        }
        .content-body {
          margin-top: 20px;
          &.detail {
            padding: 0 6px;
          }
          &.echarts-box {
            margin-top: 10px;
          }
          .content-text {
            font-size: 14px;
            padding: 4px 0 0px 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #717689;
            display: inline-block;
          }
          .formula-box {
            width: 100%;
            min-height: 38px;
            box-sizing: border-box;
            background: #f4f8fe;
            border-radius: 1px;
            display: flex;
            margin-top: 10px;
            > div {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .formula-icon {
              width: 38px;
              background: #dceeff;
            }
            .formula-text {
              width: calc(100% - 38px);
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #717689;
              padding: 10px 12px;
              .devide {
              }
            }
          }
          .detail-box {
            display: flex;
            width: 100%;
            .detail-item {
              width: 33.33%;
              min-height: 64px;
              box-sizing: border-box;
              background: #f4f8fe;
              margin-top: 10px;
              border-radius: 1px;
              // display: flex;
              flex-direction: column;
              // align-items: center;
              justify-content: center;
              padding: 10px 4px;
              > div {
                text-align: center;
                font-family: Microsoft YaHei;
              }
              .item-value {
                font-size: 16px;
                font-weight: bold;
                color: #222222;
              }
              .item-label {
                font-size: 14px;
                font-weight: 400;
                color: #979cad;
              }
            }
          }
          .index_result {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 46px;
            align-items: center;
            background: #f4f8fe;
            box-sizing: border-box;
            padding: 0 12px;
            .index_result_title {
              // width: 200px;
              // font-size: 14px;
              // font-family: Microsoft YaHei;
              // font-weight: 400;
              // color: #515a6e;
              // line-height: 33px;
              width: 18rem;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
            .evaluation {
              width: 32px;
              height: 32px;
              svg {
                width: 32px;
                height: 32px;
                fill: red($color: #000000);
              }
            }
          }
          .index_result + .index_result {
            margin-top: 12px;
          }
        }
      }
      .chart {
      }
    }
  }
}
</style>
